<template>
    <highcharts :options="chartOptions"></highcharts>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { get_echarts } from "../api/ecgartsAPI";

const cookie = ref([]);
const chartOptions = ref({});

onMounted(async () => {
    if (!localStorage.getItem("hzjcom")) {
        const res = await get_echarts("host_response_neighbourhood", "HostResponseNeighbourhood", 4);
        const data = JSON.parse(JSON.stringify(res.data).replace(/host_response_time/g, "name"));
        localStorage.setItem("hzjcom", JSON.stringify(data).replace(/count/g, "y"));
    }
    cookie.value = JSON.parse(localStorage.getItem("hzjcom"));
    chartOptions.value = {
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: "pie",
        },
        title: {
            text: "房东回复时间分布",
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: "pointer",
                dataLabels: {
                    enabled: false,
                },
                showInLegend: true,
            },
        },
        series: [
            {
                name: "回复时间分布",
                colorByPoint: true,
                data: cookie.value
            },
        ],
    }
});
</script>

<style scoped></style>
